<!doctype html>
<html>
<head>
<title>扫雷 - 作品</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Keywords" content="html5,css3">
<meta name="Description" content="html5和css3练习，感谢网络开源代码">
<link rel="stylesheet" type="text/css" href="mineclearance.css">
</head>
<body>
	<div class="game-container" id="loadingPage">
		<img src="image/loading.gif" />
		<h3>JS版扫雷游戏</h3>
	</div>
	<div class="game-statistics hide">
		<table>
			<tr>
				<td>时间：<label class="narrow">00:00</label></td>
				<td>步数：<label class="narrow">0</label></td>
				<td><input type="checkbox" id="helperSwitch" checked="checked" /><label for="helperSwitch" class="wide">概率计算器</label></td>
				<td rowspan="2"><button type="button" id="gameStartBtn">开始游戏</button></td>
			</tr>
			<tr>
				<td colspan="2">地图大小：
					<input type="radio"  name="gameSize" value="small" id="gameSizeSmall" /><label for="gameSizeSmall">小</label>
					<input type="radio"  name="gameSize" value="middle" id="gameSizeMiddle" checked="checked" /><label for="gameSizeMiddle">正常</label>
					<input type="radio"  name="gameSize" value="large" id="gameSizeLarge" /><label for="gameSizeLarge">大</label>
				</td>
				<td>
					<input type="checkbox" id="helpLineSwitch" checked="checked" /><label for="helpLineSwitch" class="wide">九宫格辅助线</label>
				</td>
			</tr>
		</table>
	</div><br/>
	<div class="game-container hide" id="gamePage">
		<div class="solid-border-down">
			<table class="header">
				<tr>
					<td>
						<div class="solid-border-down count-box" id="mineCount">10</div>
					</td>
					<td align="center">
						<img class="status-img" id="statusBtn" title="点击此图标重新开始游戏" src="smile.png" />
					</td>
					<td valign="middle" align="right">
						<input type="radio"  name="radio" value="10" id="level1" checked="checked" /><label for="level1">初级</label>
						<input type="radio"  name="radio" value="40" id="level2" /><label for="level2">中级</label>
						<input type="radio"  name="radio" value="99" id="level3" /><label for="level3">高级</label>
					</td>
				</tr>
			</table>
		</div>
		<div class="mine-field solid-border-down middle" id="mineMap"></div>
	</div>
</body>
<script charset="UTF-8" type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script charset="UTF-8" type="text/javascript" src="mineclearance.js"></script>
</html>
